<template>
  <view class="chart-container">
    <!-- 标题区域 -->
    <view class="chart-header" v-if="title || subtitle">
      <text class="chart-title" v-if="title">{{title}}</text>
      <text class="chart-subtitle" v-if="subtitle">{{subtitle}}</text>
    </view>
    
    <!-- 图表区域 - 添加v-if条件 -->
    <view class="chart-area" v-if="isDataReady">
      <qiun-data-charts 
        type="line"
        :chartData="chartData"
        :opts="options"
        canvasId="chart1"
        canvas2d
      />
    </view>
  </view>
</template>

<script>
export default {
  props: ['title', 'subtitle', 'categories', 'seriesData','type'],
  data() {
    return {
      isDataReady: false
    };
  },
  computed: {
    chartData() {
      return {
        categories: this.categories || [],
        series: [{
          name: this.title || '数据',
          data: this.seriesData || []
        }]
      };
    },
    options() {
		if(this.type === '1'){
			return {
			  color: ['#4a8fd8'],
			  padding: [15, 15, 0, 15],
			  xAxis: {
			    itemCount: 5,
			    scrollShow: true,
			    scrollAlign: 'left',
			    disableGrid: false,
			    labelCount: 5,
			    boundaryGap: 'justify'
			  },
			  yAxis: { 
			    gridType: 'dash',
			    splitNumber: 5,
				dashLength: 2
			  },
			  extra: {
			    line: {
			      type: 'curve',
				  width: 2,
				  activeType: "hollow"
			    }
			  }
			}
		}else{
			return{
				color: ['#4a8fd8'],
				padding: [15, 15, 0, 15],
				legend: {},
				xAxis: {
				  scrollShow: true,
				  scrollAlign: 'left',
				  disableGrid: false,
				  boundaryGap: 'justify'
				},
				yAxis: { 
				  gridType: 'dash',
				  dashLength: 2
				}, 
				extra: {
				  line: {
				    type: 'curve',
					width: 2,
					activeType: "hollow"
				  }
				}
			}
		}
      
    }
  }
};
</script>
<style scoped>
.chart-container { 
  width: 670rpx;
  background: white;
  border-radius: 16rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.05);
}

.chart-header {
  margin-bottom: 20rpx;
}

.chart-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
  display: block;
}

.chart-subtitle {
  font-size: 24rpx;
  color: #999;
}

.chart-area {
  width: 680rpx; 
  height: 400rpx;
}
</style>